<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <section class="user_balance_box">
      <!-- 列表 -->
      <ul class="Order_adm_ul dipW clearfix" :class="{'mArginTOP_order':MArgin_TOPORDER}">
        <li class="Order_adm_list clearfix dipW" v-for="(listd,index) in OrderAdmlist" :key="index" >
          <div class="Order_list_title dip ju_al_bet">
            <img src="../../../static/images/userifon/userIfon_content_03.png" alt="" class="user_connet_ifonIMG">    
            <span class="Order_adm_lf">{{listd.messageTitle}}&nbsp;<i v-if="listd.whetherReading == 0">(未读)</i></span>
            <span class="Order_adm_rl">{{listd.sendingTime}}</span>

            <span @click="getorderAdmDetilas(index)" class="user_con_ifonBoxjiantou">
              <img src="../../../static/images/userifon/userIfon_content_06.png" alt="">            
            </span>
          </div>

           <transition name="collapse">
              <div class="Order_list_con dip ju_al " v-show="detail === index && di" @click="setOrderDelete(index)">
                <span class="Order_list_ifonImg" v-show="detail === index && di" >
                  <img src="../../../static/images/userifon/userIfon_content_11.png" alt="" >                        
                </span>
                <span class="user_con_ifontitleTop" v-show="detail === index && di" >删除</span>   
              </div>
           </transition>
        </li>
        <li class="ORder_adm_Nonedata" v-if="dataNone">暂无消息</li>
      </ul>
    </section>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/userContent',
        text:'消息中心',
      },
      OrderAdmlist:'', //商品列表
      dataNone:false,//显示没有列表
      MArgin_TOPORDER:true,
      detail:'', //滑动显示
      di:false,
    }
  }
  ,methods:{
    getorderAdmDetilas(nis){
      this.detail = nis
      if(this.detail == nis){
        this.di = !this.di;
      }else{
        this.di = false;
      }
    },
    setOrderDelete(index){
      // console.log(index)
      //点击确认删除
      this.OrderAdmlist.orders.splice(index,1);  
      if(this.OrderAdmlist.orders.length == 0){
        this.dataNone = true;
        this.MArgin_TOPORDER = false;
      }
    },
    OrderAdm(numbrer){
      this.$store.dispatch('showloader')  
      this.axios.post(this.$busPoat.content(),{}).then(res =>{
        var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(res != null || res != undefined){
            if(res.data.iplancode == 200){
              this.OrderAdmlist =res.data.readingMessage
              console.log(res.data)
              // console.log( this.OrderAdmlist)
              this.dataNone = false     
              this.MArgin_TOPORDER = true     
            }else{
              this.dataNone = true
              this.MArgin_TOPORDER = false
            }
          this.$store.dispatch('hideloader')
          }else{
            this.$store.dispatch('hideloader')            
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },2000)
      }).catch(error=>{
         alert('获取消息失败') 
      })
    }
  }
  ,components:{Nav} //引入组件
  ,created(){
    this.OrderAdm(1)
  }
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  // position: fixed;
}
.user_balance_box{
  margin-top:.8rem;
  width: 100%;
  height: 100%;
  color:#666;
  font-weight: 600;
  //   .Order_adm_teb{
      // width: 100%;
      // height: 0.8rem;
      // background: #fff;
      // position: relative;
      // padding:0rem .76rem;
      // .Order_adm_teblist{
      //   height: 100%;
      //   line-height: .8rem;
      //   font-size: .24rem;
      // }
      // .tebOrderactive{
      //   color:#FF7200;
      //   // padding-bottom:20%;
      //   border-bottom:.04rem solid #FF7200
      // }
  //   }
  .Order_adm_ul{
    width: 100%;
    position: relative;
    // margin-top:.2rem;
    .Order_adm_list{
      background: #fff;
      width: 100%;
      margin-bottom:.1rem;
    }
    .ORder_adm_Nonedata{
      width: 100%;
      position: relative;
      top:0;
      left:0;
      background:#fff;
      font-size: .6rem;
      font-weight: 500;
      text-align: center;
      height: 4rem;
      line-height: 4rem;
    }
  }
  .mArginTOP_order{
    border-top:.2rem solid #f2f2f2; 
  }
}
.collapse-enter{
    max-height: 0;
}
.collapse-enter-active {
    max-height: 10rem;
    -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.collapse-leave {
    max-height: 10rem;
}
.collapse-leave-active {
    max-height: 0;
    -webkit-transition: all .7s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: all .7s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.Order_list_title{
  width: 100%;
  height: 1.3rem;
  padding:0rem .4rem;        
  border-bottom:.02rem solid #f2f2f2;
  .user_connet_ifonIMG{
    height: 0.36rem;
    width: 7.4%;
  }
  .Order_adm_lf{
    width: 50%;
    font-weight: 500;
    text-align: center;
    font-size: .24rem;
    color:#666;
    i{
      color:#ff7200;
    }
  }
  .Order_adm_rl{
    color:#999;
    font-size: .2rem;
    width: 20%;
    text-align: center;
    line-height: .25rem;
  }
  .user_con_ifonBoxjiantou{
    height: 100%;
    width: 12%;
    text-align: center;
    line-height: 1.3rem;
    img{
      width: 0.2rem;
      height: 0.1rem;
    }
  }
}
.Order_list_con{
  width: 100%;
  height: 1rem;
  // padding:.3rem 0rem .26rem 0rem;
  .Order_list_ifonImg{
    // height: 100%;
    max-width: 1.24rem;
    width: 5%;
    margin-right:1.5%;
    // background: #000;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .ORder_adm_Nonedata{
    color:#FF5454;
    font-size: .2rem;
  }
}
</style>
